<script setup>
import { reqMenuList,reqUserGetmenu ,reqUserSetmenu} from '../../../api/menu'
import { onMounted, ref, reactive } from 'vue';

// const userGetmenu=ref([])
const MenuList = reactive([])
const pageNum = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false) //控制对话框的显示与隐藏
const menuFormRfe=ref() //from组件
const treeRef=ref() //树形组件
const menuForm = reactive({
    id:'',
    name:'' ,
    permissions:'' ,

})

//定义规则
const rules =reactive({
    name:[{ required: true, message: '请填写权限名称', trigger: 'blur'}]
})

//菜单权限数据
const permissionsData=ref([])

//菜单权限数据默认选中
const defaultCheckedKeys=ref([3,4])
const getMenuData=async()=>{ 
    const res=await reqUserGetmenu()
    console.log(res);
    
    permissionsData.value=res.data.data
    
}




// // 菜单列表数据
// const getMenuList = async () => {
//     const res = await reqMenuList(pageNum.value, pageSize.value)
//     console.log(res ,'res');


// }

// 添加权限
const submitForm= async( formEl)=>{
    if(!formEl) return
   await formEl.validate((valid)=>{
    if(valid){ 
        dialogVisible.value=false
        // 获取权限数据
        const permissions= JSON.stringify(treeRef.value.getCheckedKeys())
        reqUserSetmenu({name: menuForm.name, permissions,id: menuForm.id}).then(({data})=>{
            console.log(data ,'data');
            
        })
     
       
    }else{
        console.log('error submit!')
    }

   })
    

}


onMounted(() => {

     getMenuData()
    // getMenuList()

    
})



</script>

<template>
    <div>
        <el-card>
            <el-button  type="primary"  icon="Plus"  @click="dialogVisible = true">新增</el-button>
            <el-table :data="MenuList" style="width: 100%">
                <el-table-column prop="id" label="id" width="180" />
                <el-table-column prop="name" label="昵称" width="180" />
                <el-table-column prop=" permissions" label="菜单权限" />
                <el-table-column prop="" label="操作" />
            </el-table>
            <el-pagination v-model:current-page="currentPage1" :page-size="100" :size="size" :disabled="disabled"
                :background="background" layout="->, total, prev, pager, next" :total="1000"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            <!-- 新增对话框 -->
            <el-dialog v-model="dialogVisible" title="添加权限" width="500" :before-close="handleClose">
                <el-form  ref="menuFormRfe" :model="menuForm" :rules="rules">
                    <el-form-item v-show="false"  prop="id">
                        <el-input v-model="menuForm.id "/>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="menuForm.name"  placeholder="请填写权限名称"/>
                    </el-form-item>
                    <el-form-item label="权限" >
                        <el-tree ref="treeRef" 
                        :data="permissionsData" 
                        show-checkbox  
                        :default-expanded-keys="[2]"
                        :default-checked-keys="defaultCheckedKeys"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm(menuFormRfe)" >
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </el-card>

    </div>

</template>

<style scoped></style>